<template>
  <div class = "city">
    <div class="city-head">
      <div class="header">
      <router-link class="close" to="/film/nowPlaying" tag="div">关闭</router-link>
      <div class="city-title">
          当前城市
      </div>
    </div>
    <div class="city-search">
      <input type="text" placeholder="请输入城市名或拼音">
    </div>
    </div>
    <div class="gps-city">
        <h5>GPS定位您所在的城市</h5>
        <ul>
            <router-link tag="li" to="/film/nowPlaying" @click.native = "changeCity(gpsCity)" class="city-item">{{gpsCity}}</router-link>
        </ul>
    </div>
    <div class="hot-city">
        <h5>热门城市</h5>
        <ul class="clearfix">
            <router-link tag="li" to="/film/nowPlaying" @click.native = "changeCity(item.name)" v-for="(item, index) in hotCitys" :key="index" class="city-item">{{item.name}}</router-link>
        </ul>
    </div>
    <ul class="city-list">
       <li v-for="(item, index) in classCity" :key="index" class="word" :id="item.word">
         <h5>{{item.word}}</h5>
         <ul class="clearfix">
           <router-link tag = "li" to="film/nowplaying" @click.native = "changeCity(items.name)" class="city-list-item" v-for="(items, indexs) in item.arrCity" :key="indexs">{{items.name}}</router-link>
         </ul>
      </li>
    </ul>
    <div class="side">
      <ul>
        <li v-for="(item, index) in classCity" :key="index"><a :href="['#' + item.word]">{{item.word}}</a></li>
      </ul>
    </div>
  </div>
</template>

<script>
/* eslint-disable space-before-blocks */
import axios from 'axios'
import {mapState, mapMutations} from 'vuex'
export default {
  name: 'city',
  data () {
    return {
      city: [],
      hotCitys: [],
      classCity: [],
      addressNow: ''
    }
  },
  created () {
    axios.get('/address/city').then((res) => {
      this.city = res.data
      console.log(this.city)
      this.hotCity()
      this.wordCity()
    })
    axios.get('/address/ip').then(res => {
      console.log(res)
      this.addressNow = res.data.result.ad_info.city
      this.$store.commit('selectCity', this.addressNow)
    })
  },
  computed: {
    ...mapState({ 'gpsCity': 'city' })
  },
  methods: {
    ...mapMutations([
      'selectCity'
    ]),
    changeCity (str) {
      console.log(str)
      this.$store.commit('selectCity', str)
    },
    /**
     * 从结果中筛选出我们的热门城市
     */
    hotCity () {
      this.hotCitys = this.city.data.filter(item => item.isHot === 1)
    },
    /**
     * 将我们的城市按照拼音首字母进行筛选
     */
    wordCity () {
      var arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']
      for (var i = 0; i < arr.length; i++) {
        var reg = new RegExp('^' + arr[i])
        var temp = this.city.data.filter(item => {
          if (reg.test(item.pinyin.toLowerCase())){
            return item.name
          }
        })
        if (temp.length > 0){
          this.classCity.push({
            word: arr[i],
            arrCity: temp
          })
        }
      }
    }
  }
}
</script>

<style lang="scss">
@import '@/styles/common/px2rem.scss';
.city{
  flex: 1;
  overflow-y: auto;
  position: relative;
  .side {
    position: fixed;
    right: 0;
    top: px2rem(100);
    background-color: #fff;
    li {
    font-size: px2rem(16);
    text-align: center;
    padding: px2rem(5) 0;
    line-height: px2rem(14);
    a{
      text-decoration: none;
      color: #333;
    }
    }
  }
  .city-head{
     position: fixed;
      top: 0;
      left: 0;
      background-color: #fff;
  }
  .header{
      display: flex;
      padding: px2rem(10);
      font-size: px2rem(16);
      justify-content: center;
      .close{
          width: px2rem(52);
      }
      .city-title{
         width: px2rem(248);
         text-align: center;
      }
  }
  .city-search {
      width: 100%;
      height: px2rem(30);
      padding: px2rem(9) px2rem(15);
      display: flex;
      justify-content: center;
      line-height: px2rem(30);
      background-color: #F4F4F4;
      input{
        width: px2rem(365);
        height: 100%;
        border: 0;
        padding-left: px2rem(10);
        font-size: px2rem(18);
      }
  }
  .gps-city {
      margin-top: px2rem(110);
      padding: px2rem(10);
      h5 {
        font-size: px2rem(13);
        color: #797d82;
        font-weight: 400;
        margin-bottom: px2rem(7);
      }
   }
   li.city-item {
          font-size: px2rem(13);
          color: #191a1b;
          width: px2rem(99);
          height: px2rem(30);
          text-align: center;
          line-height: px2rem(30);
          background: #f4f4f4;
    }
    .hot-city{
        padding: px2rem(10);
         h5 {
        font-size: px2rem(13);
        color: #797d82;
        font-weight: 400;
        margin-bottom: px2rem(7);
        }
        li{
            float: left;
            margin: px2rem(10) px2rem(8);
        }
    }
    .city-list{
      padding: px2rem(5);
      li.word{
        h5{
          height: px2rem(30);
          background-color: #F4F4F4;
          color: #797d82;
          padding-left: px2rem(10);
          font-size: px2rem(12);
          line-height: px2rem(30);
        }
      }
      .city-list-item{
        font-size: px2rem(14);
        text-align: center;
        float: left;
        width: px2rem(114);
        height: px2rem(48);
        line-height: px2rem(48);
        overflow: hidden;
      }
    }
}
</style>
